<template>
  <div class="iptz">
    <van-search
      clearable
      clear-trigger="always"
      v-model="value"
      show-action
      label="|"
      placeholder="防晒霜"
      @click="onSearch"
      left-icon=""
    >
      <!-- <van-icon name="scan" /> -->
      <template #action>
        <div @click="onSearch">搜索</div>
      </template>
      <template #left>
        <div @click="onScan" class="sm">
          <!-- 扫码图标 -->
          <van-icon @click="show = true" is-link name="scan" />
          <!-- 扫码成分表 -->
          <van-action-sheet
            v-model="show"
            :actions="actions"
            @cancel="onCancel"
            @select="onSelect"
            close-on-click-action
            cancel-text="取消"
            round
          />
            <!-- 成分表解析 -->
          <van-action-sheet
            v-model="show1"
            :actions="actions1"
            @select="onSelect1"
            cancel-text="取消"
            close-on-click-action
            @cancel="onCancel1"
          />
        </div>
      </template>
    </van-search>
  </div>
</template>

<script>
import { Toast } from "vant";
export default {
  data() {
    return {
      value: "",
      show: false,
      show1: false,
      actions: [
        { name: "条形码扫码", color: "blue", to: "/scan" },
        { name: "成分表解析", color: "red" },
      ],
      actions1: [
        { name: "拍照", color: "blue" },
        { name: "相册选图", color: "blue",to: "/scan" },
        { name: "手动输入", color: "blue" },
      ],
    };
  },

  methods: {
    onCancel() {
      Toast("取消");
    },
  },
  methods: {
    onSearch() {
      this.$router.push({path:'/search'})
    },
    onScan() {
    },
    onCancel() {
      Toast("取消");
    },
    onCancel1() {
      Toast("取消11");
    },
    onSelect(item) {
      if (item.to) {
        this.$router.push(item.to);
      } else {
        this.show1 = true;
      }
    },
    onSelect1(item) {
      if (item.to) {
        this.$router.push(item.to);
      } else {
        Toast("前方的区域以后再来探索吧");
      }
    },
  },
};
</script>

<style lang="scss">
.iptz{
  // margin-top: 100px;
  width: 45rem;
  margin-left: 100px;
  // border: 1px solid red;
  // background: red;
  height: 66px;
  // height: auto;
  .van-search{
  width: 43.625rem;
  height: 4.125rem;
  // background: red;
  border-radius: 32px 32px 32px 32px;
  opacity: 1;
  margin-left: 75px;
  margin-top: 0;
  .van-search__content {
  box-sizing: border-box;
  height: 50px;
  font-size: 1.5rem;
  background-color: #fff;
  border-radius: 25px 25px 25px 25px;
  padding-top: 0.4375rem;
  .van-cell{
    .van-cell__value{
    .van-field__body{
    .van-field__control{
      height: 30px;
      background: none;
      font-size: 20px;
      // background: red;
    }
  }
  }
  }
}
.van-search__action {
  font-size: 1.5rem;
  width: 6.25rem;
  height: 3.125rem;
  background: #bbd2f4;
  border-radius: 25px 25px 25px 25px;
  opacity: 1;
  /* background: red; */
  text-align: center;
  line-height: 50px;
  color: #fff;
  font-size: 1.375rem;
  font-family: PingFangSC-Medium-, PingFangSC-Medium;
  margin-right: 1.375rem;
}
.sm .van-icon {
  font-size: 1.75rem;
  color: #bbd2f4;
  margin-left: 0.9375rem;
}
}
.van-search__label {
  font-size: 1.75rem;
  font-weight: 100;
  /* height: 1.625rem; */
  color: #bbd2f4;
}
.van-field__left-icon {
  display: none;
}
}
</style>